<template>
    <div class="boxCol pd-20 marginTop20" style="height:440px;overflow: auto;" v-infinite-scroll="loadMoreData">
        <el-row :gutter="20" class v-if="data.length > 0">
            <el-col :key="index" :span="4" v-for="(item, index) in data">
                <div @click="selectFun(item,index)" class="videoBox hand radius10 marginBottom20" style="position: relative;">
                    <el-image :src="item.first_frame" fit="cover" style="width: 100%;height: 280px;"></el-image>
                    <div class style="padding: 10px;font-size: 14px;">
                        <div class="omit1">{{ item.creation_name }}</div>
                        <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
                            <div class="mt-4 flex align-center">
                                <div class="flex align-center author-name">
                                    <el-image :src="item.author.avatar" fit="cover" style="width: 20px;height: 20px;border-radius:100%;flex-shrink: 0"></el-image>
                                    <span class="color-999 pl-6 font-13">{{ item.author.name }}</span>
                                </div>
                                <div class="color-999 pl-6 font-13">{{ item.created_at | getTimeAgo }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="notSelect" v-if="type == 'edit'">
                        <img alt src="@/assets/manage/select.png" srcset style="width: 100%;" v-if="item.select" />
                        <img alt src="@/assets/manage/not-select.png" srcset style="width: 100%;" v-else />
                    </div>
                </div>
            </el-col>
        </el-row>

        <div v-else>
            <el-empty :image="empty_image"></el-empty>
        </div>
        <div class="text-center font-15 color-999 mt-10 marginBottom20" v-if="append_loading">
            <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px; height: 30px"></el-image>
        </div>
        <div class="text-center font-15 color-999 mt-10" v-if="data.length >= total">~没有更多了~</div>

        <short-pop :creation="creation" :index="choose_index" @next="next" @prev="prev" @setLike="setLike" ref="pop"></short-pop>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
import shortPop from '@/components/video/short.vue'
export default {
    components: {
        shortPop,
    },
    mixins: [pageTool],
    props: {
        user_id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            query: {
                user_id: '',
                creation_type: 'short',
                size: 12,
            },
            empty_image: require('@/assets/image/empty.png'),
            data: [],
            deleteId: [],
            type: 'views',
            creation: null,
            choose_index: 0,
        }
    },
    mounted() {
        if (this.user_id) {
            this.query.user_id = this.user_id
            this.beforeInit()
        }
    },
    methods: {
        beforeInit() {
            this.url = '/creation/index'
            this.append = true
            this.init() //重新请求数据
        },
        showPop(creation, index) {
            console.log('index', index)
            this.creation = creation
            this.$refs.pop.visible = true
            this.choose_index = index
            this.$nextTick(() => {
                this.$refs.pop.init()
            })
        },

        setLike(data) {
            if (data.type != undefined && data.index != undefined) {
                this.data[data.index].liked_count = data.type
                if (data.type) {
                    this.data[data.index].like_count++
                } else {
                    this.data[data.index].like_count--
                }
            }
        },

        next() {
            let next_creation = this.data[this.choose_index + 1]
            if (next_creation) {
                this.creation = next_creation
                this.$nextTick(() => {
                    this.$refs.pop.switch()
                    this.choose_index++
                })
            }
        },
        prev() {
            let prev_creation = this.data[this.choose_index - 1]
            if (prev_creation) {
                this.creation = prev_creation
                this.$nextTick(() => {
                    this.$refs.pop.switch()
                    this.choose_index--
                })
            }
        },

        selectFun(item, index) {
            if (this.type == 'views') {
                this.showPop(item, index)
                return
            }
            console.log('item', item)
            //判断是否有select属性
            if (item.hasOwnProperty('select') && item.select) {
                this.$set(item, 'select', false)
            } else {
                this.$set(item, 'select', true)
            }

            if (this.deleteId.includes(item.creation_id)) {
                //存在就删除
                console.log(`${item.creation_id} 存在于数组中`)
                this.deleteId.splice(this.deleteId.indexOf(item.creation_id), 1)
                console.log(' this.deleteId', this.deleteId)
            } else {
                console.log(`${item.creation_id} 不存在于数组中`) //不存在就添加
                this.deleteId.push(item.creation_id)
                console.log(' this.deleteId', this.deleteId)
            }
        },
        allSelect() {
            console.log('全选')
            this.data = this.data.map((item) => ({ ...item, select: true }))
            this.deleteId = this.data.map((item) => item.creation_id)
            console.log(this.deleteId)
        },

        cancelAllSelect() {
            console.log('取消全选')
            this.data = this.data.map(({ select, ...rest }) => rest)
            this.deleteId = []
        },

        deleteBrowse() {
            if (this.deleteId.length == 0) {
                this.$message.warning('请选择内容')
                return
            }
            console.log('this.deleteId', this.deleteId)
            this.$request.del('/creation/delete_batche', { creation_ids: this.deleteId }).then((res) => {
                try {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        customClass: 'messageClass',
                    })
                    console.log('messageClass')
                    //删除选中的id
                    this.data = this.data.filter((item) => !this.deleteId.includes(item.creation_id))
                } catch (err) {
                    console.log('err', err)
                }
            })
        },

        loadMoreData() {
            console.log('我执行了')
            this.page++
            this.init()
        },
    },
}
</script>

<style lang="scss" scoped>
.videoBox {
    background-color: #151225;
    overflow: hidden;
}

.notSelect {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
}
</style>